<template>
  <section class="OceClusterDame">
    <my-map
      :adapter="adapter"
      width="100%"
      height="100%"
      ref="myMap"
      :min-zoom="4"
      :max-zoom="19"
      :center="center"
      projection="EPSG:3857"
      style="cursor: pointer"
      @ready="mapReady"
    >
      <my-map-scale />
      <my-map-zoom />

      <oce-cluster
        :data="clusterData"
        @dblclickCircle="dblclickCircle"
      />
    </my-map>
  </section>
</template>

<script>
import {
  MyMap,
  MyMapScale,
  MyMapZoom
} from "$ui/map";
import { transform } from "ol/proj";

export default {
  nama:'OceClusterDame',
  components: {
    MyMap,
    MyMapScale,
    MyMapZoom
  },
  data() {
    return {
      adapter: {
        type: "XYZ",
        url:
          "http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scl=1&style=7",
      },
      center: transform(
        [parseFloat(118.120866), parseFloat(24.497659)],
        "EPSG:4326",
        "EPSG:3857"
      ),
      olMap: "",
      myMap: "",
      clusterData: null
    }
  },
  mounted() {
    this.getClusterData();
  },
  methods:{
    // 地图初始化完成
    mapReady(map, vm) {
      // console.log(map, vm);
      this.olMap = map;
      this.myMap = vm;
      
    },
    // 添加测试图层
    getClusterData() {
      let clusterData = [];
      for (let i = 0; i < 2000; i++) {
        let coordinate = [117.5 + Math.random(), 24.5 + Math.random()]
        clusterData.push({
          coordinate: transform(coordinate, "EPSG:4326", "EPSG:3857")
        })
      }
      this.clusterData = clusterData
    },
    dblclickCircle(param) {
      let { feature } = param
      this.$ocean.olUtil.fitView(this.olMap,feature)
    }
  }
}
</script>

<style lang="scss" scoped>
.OceClusterDame{
  width: 100%;
  height: 100%;
}
</style>